<template>
  <div class="cart">
    <div class="cart-list">
      <div
        class="cart-list-item"
        v-for="item in cart"
        :key="item.id"
      >
        <div class="item-l">
          <van-checkbox v-model="item.isChecked"></van-checkbox>
        </div>
        <div class="item-r">
          <van-card
            num="2"
            :price="item.price + '.00'"
            :desc="item.desc"
            :title="item.title"
            :thumb="item.img"
          >
            <template #num>
              <van-stepper
                @plus="addShop(item.id)"
                @minus="subShop(item.id)"
                v-model="item.count"
                theme="round"
                button-size="22"
                disable-input
              />
            </template>
          </van-card>
        </div>
      </div>
    </div>
    <van-submit-bar
      :price="getAllPrice * 100"
      button-text="去结算"
    >
      <!-- <van-checkbox v-model="allChecked">全选</van-checkbox> -->
      <input
        type="checkbox"
        :checked="getAllCheck"
        @click="handleCheck"
      />全选
      <template #tip> 你的收货地址不支持同城送, <span>修改地址</span> </template>
    </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
export default {
  computed: {
    ...mapState('goodsDetail', ['cart']),
    ...mapGetters('goodsDetail', ['getAllPrice', 'getAllCheck']),
  },
  data() {
    return {};
  },
  methods: {
    handleCheck() {
      this.$store.commit('goodsDetail/allCheck');
    },
    addShop(num) {
      this.$store.commit('goodsDetail/addShop', num);
    },
    subShop(num) {
      this.$store.commit('goodsDetail/subShop', num);
    },
  },
};
</script>
<style
  lang="scss"
  scoped
>
.cart {
  margin-top: 46px;
  margin-bottom: 80px;
  .cart-list {
    .cart-list-item {
      display: flex;
      .item-l {
        flex: 0.5;
        display: flex;
        justify-content: center;
      }
      .item-r {
        flex: 3;
        .van-card__title {
          font-size: 14px;
          font-weight: bold;
        }
        .van-card__desc {
          width: 200px;
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
